<template>
  <view class="content">
	  <u-navbar :is-back="false" title="请假详情"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
    <view class="tedata x-row u-skeleton">
      <image class="u-skeleton-circle" :src="$api.UserImg(info.fUserId)"></image>
      <view class="x-col x-col-center">
        <view class="name_my u-skeleton-fillet">{{info.fUserName}}</view>
        <!-- <view class="datare">等待 唐郭 审批</view> -->
        <view class="datare u-skeleton-fillet" :style="{color:$api.getCheck(info.fStatus).color}">
          {{$api.getCheck(info.fStatus).name}}
          <!-- <text v-if="info.fStatus==0" style="color:#FF930A">待审核</text>
          <text v-if="info.fStatus==1" style="color:#FF930A">审批中</text>
          <text v-if="info.fStatus==2" style="color:#22BFB6">审批通过</text>
          <text v-if="info.fStatus==3" style="color:#f00">审批未通过</text> -->
        </view>

      </view>
    </view>

    <view class="laverdata">
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">审批编号</view>
        <view class="ruht_text x-col">{{info.fId}}</view>
      </view>
      <!-- <view class="x-row">
				<view class="left_text">所在岗位</view>
				
				<view class="ruht_text x-col">司机</view>
			</view> -->
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">请假类型</view>
        <view class="ruht_text x-col">{{types.get(info.fType)}}</view>
      </view>

      <view class="x-row u-skeleton-fillet">
        <view class="left_text">提交时间</view>
        <view class="ruht_text x-col">{{info.fCreateTime}}</view>
      </view>
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">开始时间</view>
        <view class="ruht_text x-col">{{info.fBeginTime}}</view>
      </view>
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">结束时间</view>
        <view class="ruht_text x-col">{{info.fEndTime}}</view>
      </view>
      <!-- 			<view class="x-row">
				<view class="left_text">时长(小时)</view>
				<view class="ruht_text x-col">7.5 <text style="color:#007AFF; padding-left: 15upx;">明细</text></view>
			</view> -->
      <view class="x-row u-skeleton-fillet">
        <view class="left_text">请假事由</view>
        <view class="ruht_text x-col">{{info.fContent}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
      types: new Map([
        [1, '日常报销'],
        [2, '出差报销']
      ]),
      info: '',
      id: '',
      loading: true
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getinfo()
  },
  methods: {
    getinfo() {
      let that = this
      this.$axios('api/WorkLeave/GetDetail', 'post', { value: this.id }).then(res => {
        that.loading = false
        that.info = res.Value
      })
    }
  }

  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped>
.tedata {
  padding: 40upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.tedata image {
  width: 96upx;
  height: 96upx;
  display: block;
  border-radius: 50upx;
  margin-right: 25upx;
}
.name_my {
  color: #34404a;
  font-size: 36upx;
}
.datare {
  color: #ff930a;
  font-size: 30upx;
  padding-top: 10upx;
}

.laverdata {
  padding: 32upx;
  padding-bottom: 0;
}
.laverdata .x-row {
  margin-bottom: 25upx;
}
.left_text {
  color: #979797;
  font-size: 32upx;
  width: 180upx;
}
.ruht_text {
  color: #1b1919;
  font-size: 30upx;
}
</style>
